<template>
  <div style="width: 100%;padding-top:14px;height:calc(100vh - 84px);overflow:auto">
    <div class="document-right-header">
      <div class="document-right-header-left">
        <el-input size="medium" class="document-right-header-left-input" suffix-icon="el-icon-search" placeholder="搜索文档"
                  v-model="listQuery.name" @change="queryClick"></el-input>
        <el-select style="margin-left:20px;margin-right:20px" v-model="value" placeholder="请选择附件类型"
                   @change="selectClick">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button @click="detailedClick" type="primary" plain>任务清单</el-button>
      </div>
      <div class="document-right-header-right">
        <div>
          <singlefileUpload style="width:100px" ref="upload" :ruleFormdocFilePath='docForm.docFilePath' @uploadListDel="uploadListDel"
                            @uploadSave="uploadSave" @returnUrl="returnUrl" @uploadListShow="uploadListShow">
            <template v-slot:openDialog>
              <div style="display: flex;flex-direction: column;">
                <el-button style="width: 100px;" plain>上传附件</el-button>
              </div>
            </template>
          </singlefileUpload>
        </div>
      </div>
    </div>
    <div class="proj_file">
      <!-- <div class="proj_file_left" v-if="value == 'projTaskDoc'">
          <taskindex style="width:150px" :taskForm="taskForm" @TaskdetailsClick='TaskdetailsClick'></taskindex>
      </div> -->
      <div class="proj_file_right" v-if="detailedValue==false">
        <div style="position: relative;">
          <div class="document-right-content" style="margin-bottom: 30px;" v-if="switchType == 'row'">
            <row style="flex: 1;" :functionIndex="functionIndex" :data='documentForm' :listQuery="listQuery"></row>
          </div>
          <div class="document-right-content" v-if="switchType == 'column'">
            <div v-for="(item,index) in documentForm">
              <column class="document-right-content-column" :functionIndex="functionIndex" :listQuery="listQuery"
                      :item="item" :key="index">
              </column>
            </div>
            <div v-if="documentForm.length == 0"
                 style="flex: 1;display: flex;justify-content: center;align-items: center;">
              <el-empty description="暂无数据"></el-empty>
            </div>
          </div>
        </div>
        <div>
          <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
                      @pagination="loadList"/>
        </div>
      </div>
      <div style="flex:8;padding-right:15px;margin-top:15px;box-sizing: border-box;" v-if="detailedValue == true">
        <el-table style="width: 100%" :data="taskForm" row-key="id" border lazy :load="load"
                  :tree-props="{children: 'children', hasChildren: 'isLeaf'}">
          <el-table-column prop="data.name" label="任务名称" width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.data.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务阶段" width="100" align="center">
            <template slot-scope="scope">
              <el-tag
                  style="margin-top:5px;margin-bottom:5px;width: 70px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                  v-for="item in scope.row.data.tags" :key="item.name" effect="plain">
                {{ item.name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="data.content" label="任务描述" width="220">
          </el-table-column>
          <el-table-column prop="data.createTime" label="起止时间" width="210" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.data.workStartDate }}</span>
              <span v-if="scope.row.data.workStartDate&&scope.row.data.workEndDate"> -> </span>
              <span>{{ scope.row.data.workEndDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="data.createTime" width="210" label="相关人员" >
            <template slot-scope="scope" >
              <span v-for="item in scope.row.data.userList">{{item.userName}}、</span>
            </template>
          </el-table-column>
          <el-table-column label="附件"  width="210" >
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.data.docList">
                <a :href="item.docFilePath[0].fileUrl">{{ index + 1 }}、{{ item.name }}</a>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
                    @pagination="loadList"/>
      </div>
    </div>
  </div>
</template>

<script>
import {list} from "@/api/doc.js";
import Vue from "vue";
import column from "./column.vue";
import row from "./row.vue";
import pagination from "@/components/Pagination/index.vue";
import singlefileUpload from "../../../../components/upload/singlefileUpload";
import {save} from "@/api/doc.js";
import uploadList from "@/components/upload/uploadList.vue";
import selectTask from "@/components/projectComponents/selectTask.vue";
import {getTreeData} from "@/api/task";

export default {
  data() {
    return {
      taskForm: [],
      props: {
        label: "indexName",
        children: [],
        isLeaf: "isLeaf",
      },
      projectform: "",
      documentType: "全部类型",
      switchType: "column",
      documentForm: [],
      listQuery: {
        current: 1,
        size: 20,
        docType: "00",
        // dirId:'',
        deleted: 0,
        isUpdate: 0,
        isMyCreate: 0,
        name: "",
        docTypeId: "",
        taskDoc: "",
      },
      keyWord: {},
      docForm: {
        name: "",
        docFilePath: [],
        status: "00",
        docType: "00",
        dirId: "",
      },
      uploadForm: [],
      total: 0,
      functionIndex: 0,
      uploadListType: false,
      options: [
        {
          value: "projDoc",
          label: "项目附件",
        },
        {
          value: "projTaskDoc",
          label: "任务附件",
        },
      ],
      value: "projDoc",
      detailedValue:false,
    };
  },
  components: {
    column,
    row,
    pagination,
    singlefileUpload,
    uploadList,
    selectTask,
  },
  created() {
    this.projectform = this.form;
    this.listQuery.docTypeId = this.$route.query.id;
    this.loadList();
    // this.dirgetTreeDataclick();
    // 修改更新list列表
    this.$EventBus.$on("updateDoc", (data) => {
      var _this = this;
      console.log(data);
      console.log("我进来了");
      if (
          data.type == "del" ||
          data.type == "move" ||
          data.type == "removeIsMark" ||
          data.type == "recovery"
      ) {
        _this.documentForm.forEach(function (item, index) {
          if (item.docId == data.data.docId) {
            _this.documentForm.splice(index, 1);
            _this.$forceUpdate();
            console.log(_this.documentForm);
          }
        });
      } else if (data.type == "update") {
        _this.documentForm.forEach(function (item, index) {
          if (item.docId == data.data.docId) {
            _this.documentForm[index] = data.data;
            _this.$forceUpdate();
          }
        });
      }
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("updateDoc");
  },
  props: ["form"],
  watch: {
    form: {
      handler(val, oldval) {
        this.projectform = val;
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
    // value: {
    //     handler(val, oldval) {
    //         if (val == "projTaskDoc") {
    //             this.dirgetTreeDataclick();
    //         }
    //     },
    // },
  },
  methods: {
    TaskdetailsClick(data) {
      this.listQuery.taskDoc = data.data.taskId;
      this.loadList();
    },
    dirgetTreeDataclick() {
      var _this = this;
      getTreeData({
        current: 1,
        size: 20,
        parentId: undefined,
        level: undefined,
        projId: this.$route.query.id,
        taskTags: [],
      }).then((res) => {
        this.taskForm = res.data.data;
        console.log("99999999999999999999999999999999999999");
        console.log(this.taskForm);
        // this.total = data.total;
      });
    },
    parenIdtchange(data) {
    },
    uploadSave(val) {
      let _this = this;
      _this.docForm.docFilePath = _this.uploadForm;
      this.docForm.dirId = _this.projectform.dirId;
      this.docForm.docTypeId = this.$route.query.id;
      this.docForm.name = this.uploadForm[0].fileName;
      save(this.docForm).then((res) => {
        this.documentForm.push(res.data);
        _this.$refs.upload.sucessClick();
        this.loadList();
      });
    },
    uploadListShow(data) {
      this.uploadForm = this.docForm.docFilePath;
      this.uploadListType = data;
    },
    returnUrl(data) {
      var docFilePath = {
        fileName: data.name,
        fileUrl: data.url,
      };
      this.uploadForm.push(docFilePath);
    },
    uploadListDel(data) {
      this.uploadForm.splice(data, 1);
    },
    // uploadSave(val){
    // 		let _this = this
    // 		let data = {
    // 			 docFilePath:[{fileNmae:val.name,fileUrl:val.url}],
    //  			 name:val.name,
    // 			docType:'00',
    // 			dirId:_this.projectform.dirId,
    // 			docTypeId:this.$route.query.id,
    // 			status:'00'
    // 		}
    // 		save(data).then(res=>{
    // 			console.log(data)
    // 			this.documentForm.push(res.data)
    // 			_this.$refs.upload.sucessClick()
    // 		})
    // 	},

    // 刷新树
    updateTree(data) {
      console.log(data);
      this.$EventBus.$emit("eventName", data);
    },
    // 查询list
    loadList() {
      var _this = this;
      console.log(_this.listQuery);
      _this.keyWord = _this.listQuery;
      if (_this.value == "projDoc" && _this.detailedValue != true) {
        _this.keyWord.projDoc = _this.listQuery.docTypeId;
        _this.$delete(_this.keyWord, "projTaskDoc");
        _this.$delete(_this.keyWord, "taskDoc");
        list(_this.keyWord).then((res) => {
          console.log(res);
          _this.documentForm = res.data.docData;
          _this.total = res.data.total;
        });
      }
      if (_this.value == "projTaskDoc" && _this.detailedValue != true) {
        _this.keyWord.projTaskDoc = _this.listQuery.docTypeId;
        _this.$delete(_this.keyWord, "projDoc");
        list(_this.keyWord).then((res) => {
          console.log(res);
          _this.documentForm = res.data.docData;
          _this.total = res.data.total;
        });
      }
      if (_this.detailedValue == true) {
        getTreeData({
          current: _this.keyWord.current,
          size: _this.keyWord.size,
          parentId: undefined,
          level: undefined,
          projId: this.$route.query.id,
          taskTags: [],
          isDoc: 1,
        }).then((res) => {
          res.data.data.forEach(function (item) {
            item.isLeaf = !item.isLeaf;
          });
          this.taskForm = res.data.data;
          this.total = res.data.total
        });
      }
    },
    // 切换列表排列方式
    loadSwitch(data) {
      this.switchType = data;
    },
    loadFolder(data) {
      this.$refs.folder.loadFolder(data);
    },
    // 名字搜索
    queryClick(data) {
      console.log(data);
      this.resetClick();
      this.listQuery.name = data;
      this.loadList();
    },
    // 重置listquery
    resetClick() {
      this.functionIndex = 0;
      this.listQuery.deleted = 0;
      this.listQuery.isUpdate = 0;
      this.listQuery.isMyCreate = 0;
      this.listQuery.current = 1;
      this.listQuery.size = 10;
      this.listQuery.docType = "";
      this.listQuery.dirId = "";
      this.listQuery.name = "";
    },
    selectClick() {
      this.detailedValue = false
      this.loadList();
    },
    load(tree, treeNode, resolve) {
      console.log(tree);
      console.log(treeNode);
      console.log(resolve);
      getTreeData({
        level: Number(tree.data.taskLevel) + 1,
        parentId: tree.data.taskId,
        isDoc: 1,
      }).then((res) => {
        res.data.data.forEach(function (item) {
          item.isLeaf = !item.isLeaf;
        });
        resolve(res.data.data);
        console.log(res);
        // this.total = data.total;
      });
      // setTimeout(() => {

      // }, 1000);
    },
    detailedClick(){
      this.value = ''
      this.detailedValue  = true
      this.loadList();
    }
  },
};
</script>

<style scoped>
.document-right-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.document-right-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.document-right-header-left-select {
  width: 160px;
  margin-right: 10px;
}

.document-right-header-left-input {
  width: 220px;
}

.document-right-header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 14px;
}

.document-right-header-right-switch {
  width: 72px;
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  margin-right: 20px;
}

.document-right-header-right-switch-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dadee3;
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.document-right-header-right-switch-itemTwo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dadee3;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.switch-bg {
  background-color: #677e9f;
  border-color: #677e9f;
}

.switch-color {
  color: #677e9f !important;
}

.document-right-header-right-switch-item-title {
  font-size: 14px;
  color: white;
}

.popover-content-top-title {
  color: #2e405e;
  font-size: 14px;
  display: block;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.popover-content-top-title:hover {
  background-color: #f5f6f8;
}

.document-right-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
}

.document-right-content-column {
  margin-bottom: 20px;
  margin-right: 20px;
}

.popover-content-top-title {
  background-color: rgb(44, 126, 248);
  color: #fff;
  border-radius: 8px;
}

.popover-content-top-title:hover {
  background-color: rgb(44, 126, 248);
  color: #fff;
  border-radius: 8px;
}

.document-left-tree {
  padding: 20px;
  position: relative;
  width: 232px;
  overflow: hidden;
}

.proj_file {
  width: 100%;

  /* height: 500px; */
  display: flex;
}

.proj_file_left {
  margin-top: 20px;
  /* flex: 2; */
  height: calc(100vh - 100px);
  border-right: solid 1px #ccc;

  /* background-color: azure; */
  /* background-color: aqua; */
  /* height: 500px; */
}

.proj_file_right {
  margin-left: 10px;
  flex: 8;

  /* height: 500px; */
}
</style>
